/* 代码块样式 */

/* 代码块整体 */
#write .md-fences {
  font-family: var(--code-block-text-font);
  margin: 1.5rem 0;
  padding: 5px 0 !important;
  line-height: var(--code-block-text-line-height);
  background-color: var(--code-block-bg-color);
  word-wrap: normal;
  box-shadow: var(--code-block-shadow);
  border: var(--code-block-border);
  border-radius: var(--code-block-bg-radius) !important;
}

/* 增大相邻代码块间距，防止代码块语言输入框挡住下方代码块 */
.md-fences + .md-fences {
  margin-top: 2.3rem !important;
}

/* 代码行 */
#write .CodeMirror-wrap .CodeMirror-code pre {
  margin-right: 10px;
  padding-left: 10px;
  padding-right: 0 !important;
  font-family: var(--code-block-text-font);
  font-size: var(--code-block-text-size);
  /* 使得鼠标悬浮在滚轮上的样式与悬浮在其他地方的不同 */
  cursor: auto;
}

/* 代码块行号 */
#write .CodeMirror-linenumber {
  text-align: var(--code-block-line-number-align-style);
  color: var(--code-block-line-number-color);
  font-family: "HarmonyOS-Sans";
  font-size: var(--code-block-text-size);
  padding: 0 0 0 6px;
  top: 0;
}

/* 代码块行号右侧竖线 */
#write .CodeMirror-gutters {
  border-right: var(--code-block-line-number-right-border);
}

/* 代码块语言输入框 */
#write .code-tooltip {
  width: auto;
  font-size: var(--code-lang-input-box-text-size);
  color: var(--code-lang-input-box-text-color);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  padding: 0;
  margin: 0;
  border: none !important;
  position: relative;
  top: 10.5px;
  line-height: inherit !important;
  border-radius: 4px;
}

#write .code-tooltip .ty-input {
  border: none !important;
  margin: 0;
  padding: 1px 0;
  font-family: "Cascadia_Code_SC_PL", "HarmonyOS_Sans_SC_Thin";
  min-width: var(--code-lang-input-selection-box-width);
  background-color: var(--code-lang-input-selection-box-bg-color);
}

/* 插入代码后弹出的语言候选框 */
.auto-suggest-container {
  font-family: "Cascadia_Code_SC_PL", "HarmonyOS_Sans_SC_Thin";
  width: var(--code-lang-input-selection-box-width);
  background-color: var(--code-lang-input-selection-box-bg-color);
  border-radius: 3px;
  transition: all 0.4s ease;
  margin: 5px 0;
  /* 调整位置 */
  margin-top: -1px;
  z-index: 100;
}

/* 调整语言候选框高度 */
.auto-suggest-container.ty-show {
  max-height: var(--code-lang-selection-box-max-height) !important;
}

/* 代码块语言输入框默认提示文本 */
.ty-cm-lang-input:empty:after {
  content: attr(placeholder);
  color: var(--code-lang-input-box-prompt-text-color);
}

/* 语言候选框内部文字 */
.auto-suggest-container ul {
  font-family: "Fira";
  padding: 0 5px;
  font-size: var(--code-lang-selection-box-text-size);
}

.auto-suggest-container :is(li.active, li:hover) {
  color: var(--hover-lang-selection-box-li-text-color) !important;
  background-color: var(--hover-lang-selection-box-li-bg-color) !important;
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* 代码块光标 */
.cm-s-inner .CodeMirror-cursor {
  border-left: var(--focus-code-line-cursor-style) !important;
}

/* 以下代码只在 Typora 界面生效 */
@media screen {
  /* 光标所在行背景色 */
  .md-fences.md-focus .CodeMirror-code > div.CodeMirror-activeline {
    background: var(--focus-code-line-bg-color);
  }

  /* 代码块行横向滚轮 */
  #write pre.md-fences .CodeMirror-wrap .CodeMirror-code pre {
    overflow-x: var(--code-block-lines-horizontal-overflow-x) !important;
    white-space: var(--code-block-lines-horizontal-white-space) !important;
  }

  /* 代码块内容过多，滚动显示 */
  pre div.CodeMirror-scroll {
    position: relative;
    max-height: var(--code-block-max-height) !important;
    overflow-y: auto;
    cursor: auto !important;
    overflow-x: hidden !important;
  }

  /* 修复代码块高度未达到要求，仍出现垂直滚动条（使用行号时） */
  .CodeMirror-sizer {
    margin-bottom: 0 !important;
  }
}

/* 本文件为代码块顶栏设置 */

/* 代码块加上边框，编程语言的背景 */
#write pre.md-fences {
  border-top: var(--code-block-top-bar);
}

/* 代码语言显示【左侧】 */
#write pre::after {
  font-family: var(--code-block-text-font);
  font-weight: bolder;
  font-size: var(--code-block-topBar-right-program-lang-size);
  color: var(--code-block-topBar-right-program-lang-color);
  position: absolute;
  top: var(--code-block-topBar-right-program-lang-top-position);
  left: var(--code-block-topBar-right-program-lang-right-position);
  letter-spacing: 1px;
}
